<template>
  <div class="main-box">
    <div class="search-box">
      <el-form :inline="true">
        <el-form-item label="果蔬名称" prop="name">
          <el-input
              placeholder="请输入果蔬名称"
              clearable
              size="small"
              style="width: 240px"
          />
        </el-form-item>
        <el-form-item label="数据状态" prop="status">
          <el-select
              size="small"
              style="width: 240px"
              v-model="historyStatus"
          >
            <el-option
                v-for="status in statusList"
                :key="status.value"
                :label="status.label"
                :value="status.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="检测时间">
          <el-date-picker
              size="small"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
              type="primary"
              icon="el-icon-search"
              size="small"
          >搜索
          </el-button
          >
          <el-button icon="el-icon-refresh" size="small"
          >重置
          </el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="history-list">
      <el-row :gutter="20"
              style="height: 100%;"
              type="flex"
              class="el-row"
      >
        <el-col :span="4" class="el-col"
                v-for="(item, index) in historyList" :key="item.id">
          <el-card class="history-item" shadow="hover" :body-style="{ padding: '0px' }">
            <div class="history-image-box">
              <img :src="`/api${item.imgPath}`" class="history-image">
            </div>
            <div class="history-content">
              <p>果蔬品种：<strong>{{ item.varietyCode }}</strong></p>
              <p>时间：{{ item.createTime }}</p>
              <p>成熟度：{{ (item.matureCount / item.totalCount) * 100 }}%</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="page-container">
      <el-pagination
          background
          layout="prev, pager, next,total"
          :total="page.total"
          :page-size="page.pageSize"
          :current-page.sync="page.currentPage"
          @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>

import {getHistoryList} from "@/api/history";

export default {
  name: "History",
  data() {
    return {
      currentDate: new Date(),
      historyList: [],
      imgUrl: '',
      historyStatus: 0,
      statusList: [{
        label: "全部",
        value: 0
      }, {
        label: "正常",
        value: 1
      }, {
        label: "停用",
        value: 2
      }],
      //分页相关
      page: {
        currentPage: 1,
        total: 0,
        pageSize: 12
      }

    }
  },
  created() {
    this.loadHistoryList(this.page.currentPage,this.page.pageSize)
  },
  methods: {
    loadHistoryList(pageNum, pageSize) {
      if (!pageNum) {
        pageNum = 1
      }
      if (!pageSize) {
        pageSize = 12
      }
      const params = {
        kw: ''
      }
      // if(this.searchKeyword){
      //   params.fruitName = this.searchKeyword
      // }
      getHistoryList(pageNum, pageSize, params).then(res => {
        const {data} = res;
        if (data.code === 200) {
          this.historyList = data.data.records;
          this.page.total = data.data.total
          this.page.currentPage = data.data.current
          this.page.pageSize = data.data.size
        }
      }).catch(err => {
        console.log(err)
      })
    },
    handleCurrentChange(current){
      this.page.currentPage = current
      this.loadHistoryList(current, this.page.pageSize)
    }
  }
}
</script>

<style scoped lang="less">

.main-box {
  width: 100%;
  height: 100%;
  //display: flex;
  /*flex-direction: column;*/
  //justify-content: space-between;
  .search-box {
    display: flex;
    align-items: center;
    height: 60px;

    .keyword-input {
      margin-right: 5px;
    }
  }

  .history-list {
    width: 100%;
    height: calc(100% - 60px - 60px);

    .el-row {
      display: flex;
      flex-wrap: wrap;

      .el-col {
        //align-items: stretch;
        .history-item {
          border-radius: 6px;
          cursor: pointer;
          //height: 250px;

          .history-image-box {
            //设置的正方形容器
            //width: 100%;
            //height: 0px;
            //padding-bottom:100%;
            //overflow: hidden;
            //margin: 0px;
            //position: relative;
            position: relative;
            width: 100%; /*关键：确定下width     */
            padding-top: 100%; /*关键：确保与width一样 */

            img {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              margin: auto;
            }
          }

          .history-content {
            font-size: 12px;
            padding: 5px 10px;
          }
        }
      }
    }

  }

  .page-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
  }

}


</style>
